<template>
	<view>
		<view class="notice">
			<slot name='left'></slot>
			<view class="item">
				<row v-if='props.type=="row"'  :size='getSize()' :color="props.color" :text='props.text'></row>
				<column v-else :list='props.text' :color="props.color" :field='props.field' :size='getSize()'></column>
			</view>
		</view>
	</view>
</template>

<script setup>
	import row from './y-notice-row.vue'
	import column from './y-notice-column.vue'
	const props = defineProps({
		type: {
			default: 'row',
			type: String
		},
		size: {
			default: 14,
			type: [String, Number]
		},
		text: {
			type: [Array, String]
		},
		field: {
			default: 'title',
			type: String
		},
		color: {
			default: '#000',
			type: String
		}
	})

	const getSize = () => {
		return typeof props.size == 'number' ? props.size + 'px' : props.size.endsWith('px') ? props.size : props
			.size + 'px'
	}
</script>

<style scoped lang="scss">
	.notice {
		display: flex;
		align-items: center;

		.item {
			flex: 1;
			overflow-x: hidden;
			margin-left: 10rpx;
		}
	}
</style>